<template>
	<view class="bg-white">
		<view class="global ">
			<!--——————————————card——————————————  -->
			<view class="card margin-top">
				<view class=" item flex flex-wrap justify-around ">
					<view class="c-item text-white fs-24">
						<text>总金额(人民币) </text>
						<text class=" margin-left fs-32"
							:class="[star?'cuIcon-attentionfavor':'cuIcon-attentionfavorfill']"
							@tap="star=!star"></text>
					</view>
					<view class="c-item text-right text-white fs-24">今日参考盈亏</view>
					<view class="c-item text-xl text-bold text-white fs-72 margin-top">
						{{star?(fund.totalAssets||1000.00):'****'}}</view>
					<view class="c-item text-white fs-32 margin-top">
						<view class="text-right text-white">{{star?(dailyIncome||1000.00):'****'}}</view>
						<view class="text-right text-white padding-top">
							{{star?(fund.totalIncome/fund.totalAssets||6.88)+'%':'****'}}</view>
					</view>
				</view>

				<view class=" flex justify-between i-body">
					<view class="w-30 text-center">
						<view class="text-white">昨日收益</view>
						<view class="text-white margin-top">{{star?(dailyIncome||1000.00):'****'}}</view>
					</view>
					<view class="w-30 text-center">
						<view class="text-white">持有收益</view>
						<view class="text-white margin-top">{{star?(totalShare-totalPrincipal||1000.00):'****'}}</view>
					</view>
					<view class="w-30 text-center">
						<view class="text-white">累计收益</view>
						<view class="text-white margin-top">{{star?(fund.totalIncome||1000.00):'****'}}</view>
					</view>

				</view>

			</view>
			<!--——————————————card——————————————  -->
		</view>
		<view class="main margin-top-lg">
			<view class="flex justify-around text-bold fs-32 m-title">
				<view class="w-30 text-center ">黄金/基金</view>
				<view class="w-30 text-center">持仓/可用</view>
				<view class="w-30 text-center">盈亏</view>
			</view>
			<view class="" v-for="i in fund.lists||list" :key="i.name">
				<navigator class="flex justify-around flex-wrap margin-top-lg fs-32"
					url="../../pagesD/t-holdingDetail/t-holdingDetail">
					<view class="w-30 text-center text-cut">{{i.name}}</view>
					<view class="w-30 text-center text-bold">{{star?i.holdShare:'****' }}</view>
					<view class="w-30 text-center text-red text-bold"
						:class="[i.dailyIncome<0?'text-green':'text-red']">{{star? i.dailyIncome:'****'}}</view>
					<view class="w-30  text-center text-bold margin-top">{{i.codeId}}</view>
					<view class="w-30 text-center text-bold margin-top">{{star?i.holdShare:'****'}}</view>
					<view class="w-30 text-center text-bold text-red margin-top"
						:class="[i.dayGrowth<0? 'text-green':'text-red' ]">{{star?i.dayGrowth:'****'}}</view>
				</navigator>
				<view class="padding-top fs-24 w-670">交易：1笔交易赎回中合计1份 </view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('order')
	export default {
		data() {
			return {
				star: true,
				fund: {},
				dailyIncome: 0,
				list: [{
						name: '西部利得',
						codeId: 208,
						holdShare: 5.61,
						fund: 850.32,
						dailyIncome: 0,
						dayGrowth: '0.683%'
					},
					{
						name: '广发石油',
						codeId: 200,
						holdShare: 5.61,
						fund: 850.32,
						dailyIncome: 0,
						dayGrowth: '0.683%'
					},
				],


			}
		},

		methods: {
			...mapActions(['holdType']),
			getDailyIncome() {
				this.fund.lists.forEach(i => {
					this.dailyIncome += i.dailyIncome
				})
			}

		},
		async onLoad() {
			this.fund = await this.holdType('fund');

			console.log(this.fund, 'nisdnfisd');
		}
	}
</script>

<style lang="scss" scoped>
	/* ————————————————公共样式———————————————— */
	.global {
		width: 670rpx;
		margin: 0 auto;
	}

	.w-30 {
		width: 30%;
	}

	.fs-32 {
		font-size: 32rpx;
	}

	/* ————————————————公共样式———————————————— */

	/* ————————————————卡片———————————————— */
	.card {
		// height: 350rpx;
		background-color: #3297E5;
		border-radius: 12px;
		overflow: hidden;

		.item {
			// height: 206rpx;
			margin-top: 20rpx;
			padding-bottom: 40rpx;
			border-bottom: 1px solid #E6E6E6;

			.fs-24 {
				font-size: 24rpx;
				// height: 32rpx;
			}

			.fs-72 {
				font-size: 72rpx;
				// height: 32rpx;
			}

			.c-item {
				width: 40%;


			}


		}

		.i-body {
			margin-top: 20rpx;
			padding-bottom: 30rpx;


		}
	}

	/* ————————————————卡片———————————————— */
	.main {
		.m-title {
			padding: 24rpx 0;
			border-top: 1px solid #E6E6E6;
			border-bottom: 1px solid #E6E6E6;
		}
	}
</style>
